<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!-- VERSION DE HTML5 -->
<!DOCTYPE html>
    
<html lang="es">
	<!-- CONFIGURACION DE LA PAGINA WEB ACTUAL -->
	<head>
		<!-- GENERAL's -->
		<title>Sistema Entretenimiento</title>

		<!-- META's -->
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

		<!-- LINK's -->
		<link type="text/css" rel="stylesheet" href="resources/css/bootstrap.min.css">
		<link type="text/css" rel="stylesheet" href="resources/css/styles-general.css">
	</head>

	<!-- CONTENIDO DE LA PAGINA WEB ACTUAL -->
	<body class="container">
		
		<!-- AGREGA LOS MODAL's COMUNES -->
		<jsp:include page="template/modals.jsp" />
	
		<!-- ENCABEZADO -->
		<jsp:include page="template/header.jsp"/>

		<!-- MENU DE NAVEGACION -->
		<jsp:include page="template/navigation.jsp"/>
		
		<!-- CUERPO DE PAGINA -->
		<section class="col-xs-12">
			<form role="form" method="post" action="ServicioListar_Servlet">			
				<fieldset>
					<legend>Consultar los Servicios
						<span class="error">
							<c:if test="${not empty error }">
								<c:out value="${error }"></c:out>
							</c:if>
						</span>
					</legend>
					<div class="form-group form-inline">
						<label for="nombre">Nombre :</label>
						<input type="text" class="form-control" name="nombre" id="nombre" placeholder="Ingrese el nombre">
						<button type="submit" class="btn btn-primary">Buscar</button>
					</div>
					<table class="table table table-condensed">
						<thead>
							<tr>
								<th>N°</th>
								<th>Nombre</th>
								<th>Costo</th>
								<th>Descripción</th>
								<th>Acciones</th>
							</tr>
						</thead>
						<tbody>
							<c:if test="${not empty listServicio }">
								<c:forEach items="${listServicio }" varStatus="index" var="item">									
									<tr class="vcenter">
										<td class="col-md-1">${index.count }</td>
										<td class="col-md-4">${item.nombre }</td>
										<td class="col-md-2">${item.costo }</td>
										<td class="col-md-4">${item.contenidoHTML }</td>
										<td class="text-center">
											<a id="btnModificar" class="btn" data-target="#dlgModReg" data-backdrop="static" data-toggle="modal" data-value="${item.idServicio }" data-form="ServicioModificar_Servlet">
												<span class="glyphicon glyphicon-pencil"></span>
											</a>
											<a id="btnEliminar" class="btn" data-target="#dlgEliReg" data-backdrop="static" data-toggle="modal" data-value="${item.idServicio }" data-form="ServicioEliminar_Servlet">
												<span class="glyphicon glyphicon-remove"></span>
											</a>
										</td>
									</tr>
								</c:forEach>
							</c:if>
							<c:if test="${empty listServicio }">
								<tr>
									<td colspan="5">
										No se encontro ningun registro
									</td>
								</tr>
							</c:if>							
						</tbody>
					</table>
				</fieldset>
			</form>
		</section>

		<!-- SCRIPT's -->
		<script type="text/javascript" src="resources/js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript" src="resources/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="resources/js/scripts-general.js"></script>
	</body>
</html>